<!DOCTYPE html>
<html class="ui-page-login">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title></title>
  <link href="../css/mui.css" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="../css/login.css" />
  <style>
    .mr-hide {
      display: none;
    }
  </style>
</head>

<body>
  <header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">登录</h1>
  </header>

  <div class="mui-content">
    <div class="mc-tab">
      <div id="segmentedControl" class="mui-segmented-control">
        <a class="mui-control-item mui-active" href="#item1">帐号密码登录</a>
        <a class="mui-control-item" href="#item2">手机验证码登录</a>
      </div>
    </div>
    <div class="mc-items">
      <div id="item1" class="mui-control-content mui-active">
        <form id='login-form-pwd' class="mui-input-group">
          <div class="mui-input-row">
            <label>账号</label>
            <input id='account' type="text" class="mui-input-clear mui-input" placeholder="请输入账号">
          </div>
          <div class="mui-input-row">
            <label>密码</label>
            <input id='password' type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
          </div>
        </form>
        <form class="mui-input-group" style="display: none;">
          <ul class="mui-table-view mui-table-view-chevron">
            <li class="mui-table-view-cell">
              自动登录
              <div id="autoLogin" class="mui-switch">
                <div class="mui-switch-handle"></div>
              </div>
            </li>
          </ul>
        </form>
        <div class="mui-content-padded">
          <button id='login-pwd' class="mui-btn mui-btn-block mui-btn-primary">登录</button>
          <div class="link-area">
            <a id='reg'>注册账号</a> <span class="spliter">|</span>
            <a id='forgetPassword'>忘记密码</a>
          </div>
        </div>
      </div>
      <div id="item2" class="mui-control-content">
        <div class="mcc-img">
          <img src="../images/logo.png" />
        </div>

        <form id='login-form-code' class="mui-input-group">
          <div class="mui-input-row">
            <label><span class="mui-icon mui-icon-phone"></span></label>
            <input id='phone' type="text" class="mui-input-clear mui-input" placeholder="请输入手机号">
          </div>
          <div class="mui-input-row">
            <label><span class="mui-icon mui-icon-email"></span></label>
            <div class="mir-right">
              <input id='code' type="number" class="mui-input mr-code" placeholder="请输入验证码">
              <button type="button" class="mui-btn mui-btn-primary mr-send" data-type="code"><span id="code_text">发送验证码</span> <span class="mui-badge mui-badge-primary mr-hide"><span id="countdown">60</span>s</span></button>
            </div>
          </div>
        </form>
        <div class="mui-content-padded">
          <button id='login-code' class="mui-btn mui-btn-block mui-btn-primary">登录</button>
        </div>
      </div>

      <div class="mui-content-padded oauth-area"></div>
      <!-- 为第三方验证登录-->
    </div>
  </div>
</body>
<script src="../js/mui.js"></script>
<script src="../js/mui.enterfocus.js"></script>
<script src="../js/app.js"></script>
<script src="../js/http.js"></script>
<script>
  (function($, doc) {
    $.init({
      statusBarBackground: '#f7f7f7'
    });

    var codeFlag = true;

    $(document.body).on('tap', '.mr-send', sendCode);

    function sendCode(e) {
      let phoneEle = doc.getElementById('phone'),
        phone = phoneEle.value,
        phoneRule = /^(13\d|15[^4\D]|17[013678]|18\d)\d{8}$/;

      if (!phone) {
        return $.toast('手机号输入为空');
      }

      if (phone.length < 11) {
        return $.toast('手机号为11位,请重新输入');
      }

      if (!phoneRule.test(phone)) {
        return $.toast('手机号输入有误!请重新输入');
      }

      if (!codeFlag) return;
      codeFlag = false;

      $(this).button('loading');
      setTimeout(function() {
        $(this).button('reset');

        http.post(API.postVertCode, {
          username: phone
        }, function(res) {
          console.log('res-->>', res);
          /* $.toast('验证码:' + res.data.code, {
            duration: 'long',
            type: 'div'
          }); */
        });

        var type = this.dataset.type;
        if (type === 'code') {
          var countdown = document.getElementById('countdown'),
            codeText = document.getElementById('code_text'),
            mrHide = document.querySelector('.mr-hide'),
            cdNum = countdown.innerText;

          codeText.innerText = '正在发送...';
          mrHide.style.display = 'inline-block';

          var interval = setInterval(function() {
            cdNum -= 1;
            countdown.innerText = cdNum;
            if (cdNum === 0) {
              codeText.innerText = '发送验证码';
              mrHide.style.display = 'none';
              clearInterval(interval);
              codeFlag = true;
            }
          }, 1000);
        }
      }.bind(this), 2000);
    }

    var settings = app.getSettings();
    var state = app.getState();
    var mainPage = $.preload({
      "id": 'main',
      "url": '../index_log.html'
    });
    var toMain = function() {
      $.fire(mainPage, 'show', null);
      $.openWindow({
        id: 'main',
        show: {
          aniShow: 'pop-in'
        },
        waiting: {
          autoShow: false
        }
      });
    };

    var loginButton = doc.getElementById('login'),
      accountBox = doc.getElementById('account'),
      passwordBox = doc.getElementById('password'),
      autoLoginButton = doc.getElementById("autoLogin"),
      regButton = doc.getElementById('reg'),
      forgetButton = doc.getElementById('forgetPassword'),
      loginPwdEle = doc.getElementById('login-pwd'),
      phoneEle = doc.getElementById('phone'),
      codeEle = doc.getElementById('code'),
      loginCodeEle = doc.getElementById('login-code');

    loginPwdEle.addEventListener('tap', tapLogin.bind(loginPwdEle, 'pwd'));
    loginCodeEle.addEventListener('tap', tapLogin.bind(loginCodeEle, 'code'));

    function tapLogin(loginType, event) {
      var deviceType = '';
      if (app.clientType.versions.android) {
        deviceType = 'android';
      }

      if (app.clientType.versions.iPhone) {
        deviceType = 'iphone';
      }
      var loginInfo = {
        // username: accountBox.value,
        device_type: deviceType,
        login_type: loginType,
        // password: passwordBox.value
      };
      if (loginType === 'pwd') {
        loginInfo.username = accountBox.value;
        loginInfo.password = passwordBox.value;
      }

      if (loginType === 'code') {
        loginInfo.username = phoneEle.value;
        loginInfo.verification_code = codeEle.value;
      }
      app.login(loginInfo, function(res) {
        if (res.code === 600) {
          $.toast(res.msg);
        }

        if (res.code === 200) {
          console.log(res);
          $.toast(res.msg);
          $.openWindow({
            url: '../index_log.html',
            id: 'index',
            show: {
              aniShow: 'pop-in'
            },
            waiting: {
              autoShow: false
            }
          });
        }

        if (res.code === 404) {
          $.toast('帐号或' + res.msg + '请重新输入')
        }
      });
    }

    $.enterfocus('#login-form-pwd input', function() {
      $.trigger(loginButton, 'tap');
    });
    autoLoginButton.classList[settings.autoLogin ? 'add' : 'remove']('mui-active')
    autoLoginButton.addEventListener('toggle', function(event) {
      setTimeout(function() {
        var isActive = event.detail.isActive;
        settings.autoLogin = isActive;
        app.setSettings(settings);
      }, 50);
    }, false);
    regButton.addEventListener('tap', function(event) {
      $.openWindow({
        url: 'reg.html',
        id: 'reg',
        preload: true,
        show: {
          aniShow: 'pop-in'
        },
        styles: {
          popGesture: 'hide'
        },
        waiting: {
          autoShow: false
        }
      });
    }, false);
    forgetButton.addEventListener('tap', function(event) {
      $.openWindow({
        url: 'forget_password.html',
        id: 'forget_password',
        preload: true,
        show: {
          aniShow: 'pop-in'
        },
        styles: {
          popGesture: 'hide'
        },
        waiting: {
          autoShow: false
        }
      });
    }, false);
    //
    /*window.addEventListener('resize', function() {
    	oauthArea.style.display = document.body.clientHeight > 400 ? 'block' : 'none';
    }, false);*/

    //
    /*
    var backButtonPress = 0;
    
    $.back = function(event) {
    	backButtonPress++;
    	if (backButtonPress > 1) {
    		plus.runtime.quit();
    	} else {
    		plus.nativeUI.toast('再按一次退出应用');
    	}
    	setTimeout(function() {
    		backButtonPress = 0;
    	}, 1000);
    	return false;
    };
    */
  }(mui, document));
</script>

</html>